<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--
				父组件向子组件传递方法，使用的是事件绑定机制:v-on,当我们自定义一个事件属性之后,
				那么子组件就 能够通过 $emit 调用传递进去的方法
				此处,定义属性为func
			-->
			<com2 @func="show"></com2>
		</div>
		
		<!--定义子组件模板-->
		<template id="temp">
			<div>
				<h1>这是子组件</h1>
				<input type="button" value="点击子组件按钮，触发父组件传递过来的show方法" @click="myclick"/>
			</div>
		</template>
	</body>
	<script>
		
		/**
		 * 子组件：
		 */
		var com2={
			/*
			 * 通过指定Id,表示要去加载 这个指定Id 的template 元素的内容，当做HTML结构
			 */
			template:"#temp",
			data(){
				return{
					msg:"36"
				}							
			},
			methods:{
				myclick(){
					/**
					 * 子组件通过 $emit，调用 自定义属性 func,
					 * 即调用了父组件的方法
					 * 	 第一个参数:自定义的属性
					 * 	后面的参数:调用父组件传递的参数列表
					 */
					this.$emit("func",this.msg);
				}
			}
		}
	
		var vue=new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				show(data){
					console.log("父组件的show方法被执行:----data:"+data);
				}
			},
			components:{
				com2
			}
		});
	</script>
</html>